const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html 插件
const dev = {
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, 'build').replace('config\\', ''),
        compress: true,
        port: 3000,
        open: true
    },
    entry: {
        homePage: './src/index.js',
        other: './src/order.js',
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'build').replace('config\\', ''),
        // 所有输出资源的公共路径  ===>路径前面加个~
        publicPath: '/',
        chunkFilename: 'js/[name]_chunk.js',
        // library: '[name]', // 整个库向外暴露的变量名
        // libraryTarget: 'window' // 变量名添加到哪个上 browser
        // libraryTarget: 'global' // 变量名添加到哪个上 node
        // libraryTarget: 'commonjs'
    },
    module: {
        rules: [
            /**
             * test   使用正则表达式匹配正确的文件
             * use数组中的loader执行顺序：从左到右，从上到下，一次执行
             * style-loader  创建style标签，将js中的样式资料插入html，添加到head中生效
             * css-loader  将css文件变成commonjs模块加载到js中，里面内容是样式字符串
             * less-loader 将less文件编译成css文件
             */
            {
                test: /\.less$/, use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.css$/, use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            /**
             * 默认处理不了HTML中的img图片
             * limit: 小于多少8kb的图片压缩成base64处理，减少请求数量减轻服务器压力，
             * esModule: 因为url-loader默认使用es6模块解析，而html-loader引入图片是commonjs解析可能会出现[object Module]
             *            解决方案关闭url-loader的es6模块化，使用commonjs解析
             *  name 给图片进行重命名【hash:10】取图片的hash的前10位 【ext】取文件原来的扩展名
             *  outputPath 文件输出的路径
             */
            {
                test: /\.(jpg|jpeg|png|gif)$/, loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false,// 关闭es6模块化
                    outputPath: 'images'
                }
            },
            // 处理html中img资源
            {test: /\.html$/, loader: 'html-loader'},
            /**
             * 处理其他资源
             */
            {
                exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'files'
                }
            }
        ]
    },
    plugins: [
        /**
         * html-webpack-plugin 默认会创建一个HTML，自动打包输出的所有资源（js/css）,需要有结构的HTML文件
         */
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
};
module.exports = dev;
